<template>
  <div id="musicinfo">
    <template v-for="item in infoArr">
        <router-link :to="`/play/${item.id}`" tag="div" class="info" :key="item.id">
        <div class="left">
          {{ item.name }} <span>{{ item.song.alias.join() }}</span>
          <p>
            <span class="iconfont icon-sq" style="color: red"></span>
            {{ item.song.artists[0].name }}-{{ item.song.album.name }}
          </p>
        </div>
        <div class="right">
          <span class="iconfont icon-bofang"></span>
        </div>
      </router-link>
    </template>
  </div>
</template>

<script>
export default {
  props: ["infoArr"],
};
</script>

<style lang="scss" scoped>
#musicinfo {
  width: _vw(750);
  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 _vw(15);
    height: _vw(100);
    border-bottom: 1px solid #d4d0d0;
    .left {
      width: _vw(690);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: _vw(35);
      padding: _vw(15) 0;
      p {
        font-size: _vw(20);
        color: #9e9b9b;
        span {
          font-size: _vw(16);

          position: relative;
          bottom: _vw(-7);
        }
      }
      span {
        color: #afa9a9;
      }
    }
    .right {

      span {
        color: #c1c1c1;
        font-size: _vw(50);
      }
    }
  }
}
</style>